/**
 * 头部组件
 */
let headComponent = {
    props: {
        // 头部标题
        title: {
            type: String,
            default: '新疆种质资源库数字孪生系统'
        },
        // 天气数据
        weatherData: {
            type: Object,
            default: () => ({
                type: '01',
                condition_day: "晴",
                temp_night: "20",
                temp_day: "25"
            })
        },
        // 菜单选中
        activeMenu: {
            type: String,
            default: ''
        }
    },
    template: `
        <div class="container-head" v-light="{lightShape:['0%', '8%'], size:['50%', '40px']}">
            <div class="container-head-box">
                <div class="head-box-right">
                    <span>{{title}}</span>
                </div>
                <div class="container-head-menu">
                    <p @click="jumpMenu(item)" class="head-menu-box" :class="item.code == currentMenuCode?'head-menu-active':''" v-for="(item,index) in menuList" :key="index + 'menu'">{{item.name}}</p>
                </div>
                <div class="container-head-right">
                    <img src="../../resources/img/common/head-line.png" >
                    <img class="head-user" src="../../resources/img/common/user.png" >
                    <el-dropdown @command="menuChange" trigger="hover">
                        <span>{{userName}}</span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="admin">后台管理</el-dropdown-item>
                        </el-dropdown-menu> 
                    </el-dropdown>
                    <img src="../../resources/img/common/head-line.png" >
                    <img @click="outLoginClick" class="head-out-img" src="../../resources/img/common/head-out.png" >
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 头部日期索引
            weekData: ["日", "一", "二", "三", "四", "五", "六"],
            // 头部时间
            date: new Date(),
            // 头部时间循环实例
            setIntervalExample: null,
            // 菜单列表
            menuList: [
                // { name: "种质分布", value: "zzfb", url: "../../webroot/germplasm-analysis-dp/index.html" },
                // { name: "数字库体", value: "szkt" ,url:"../../webroot/dp-szkt/index.html"},
                // { name: "视频监控", value: "spjk", url: "../../webroot/video-surveillance-dp/index.html" },
                // { name: "温湿度监控", value: "wsdjk", url: "../../webroot/temperature-humidity-dp/index.html" },
            ]
        };
    },
    computed: {
        // 头部右侧日期
        headDate() {
            let arr = [];
            arr[0] = tpUtils.parseTime(this.date, "{y}-{m}-{d}");
            arr[1] = this.weekData[this.date.getDay()];
            arr[2] = tpUtils.parseTime(this.date, "{h}:{i}:{s}");
            return arr;
        },
        // 用户名称
        userName() {
            let name = tpSaaSCore.getUserDetails() && tpSaaSCore.getUserDetails().trueName || tpSaaSCore.getUserDetails() && tpSaaSCore.getUserDetails().userName || "admin";
            return name;
        },
        // 当前菜单码
        currentMenuCode() {
            return MACRO_VARIABLE.CURRENTURL_PARAM("targetCode");
        }        
    },
    methods: {
        /**
         * 跳转菜单
         * @param {*} item 
         */
        jumpMenu(item) {
            if (item.path) {
                window.location.href = item.path;
            }
        },
        /**
         * 退出登录点击
         */
        outLoginClick() {
            this.$confirm('确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const { logoutURL, virtualPath } = tpSaaSCore.getUserInfo() || {};
                location.href = logoutURL;
                tpSessionStorage.clear();
            }).catch(() => {
            });
        },
        /**
         * 获取菜单列表
         */
        getMenuList() {
            let params = {};
            tpHttp.post(this, GLOBAL_CONFIG.getVirtualPath() + "/api-navmenu/auth/first?proj_code=model_system", { param: JSON.stringify(params) }, (data, code, message) => {
                if (code == 0 && data && data.length) {
                    this.menuList = data;
                }
            })
        },
        /**
         * 右侧下拉菜单改变
         */
        menuChange(code) {
            window.open(GLOBAL_CONFIG.getVirtualPath() + "/home/page/model_project")
        }
    },
    mounted() {
        // 动态更新  data  中的 时间  以此来更新 计算属性的时间
        this.setIntervalExample = setInterval(() => {
            this.date = new Date();
        }, 1000);
        this.getMenuList();
    },
    beforeDestroy() {
        clearInterval(this.setIntervalExample);
    },
};
Vue.component('head-component', headComponent);


/**
 * 组件容器
 */
Vue.component('container-component', {
    props: {
        // 标题文字
        title: {
            type: String,
            default: '标题'
        }
    },
    template: `
        <div class="container-box-big">
            <div class="contain-box-title">
                <p>{{title}}</p>
            </div>
            <div class="contain-box-content">
                <slot></slot>
            </div>
        </div>
    `,
    data() {
        return {

        }
    },
    methods: {

    },
    mounted() {

    }
});

/**
 * 暂无数据
 */
Vue.component('no-data-component', {
    props: {
        // 展示文字
        title: {
            type: String,
            default: '暂无数据'
        }
    },
    template: `
        <div class="no-data-component-box">
            {{title}}
        </div>
    `,
});



Vue.directive("light", {
    inserted: function (el, binding) {
        // 初始化自定义参数
        const {
            lightColor = "#ffffff", // 光晕的颜色
            lightShape = ["0%", "18%"], // 光晕是一个两个圆形叠加，第一个参数代表内圈位置(越大则光晕中心越亮)，第二个参数代表外圈位置（越大则光晕越大）
            size = ["50%", "25%"], // 控制光晕贴图长宽上占容器的比例或大小，第一个参数如果是50%则一个动画周期内只会出现一个光晕，如果是25%则会同时出现两个光晕
            during = "7s", // 一次循环花费的时间
            background = "", // 自定义光线贴图，同css中的background, 使用后lightColor、lightShape、size均会失效
            animation = "", // 自定义动画，同css中的animation，使用后during会失效
        } = binding.value;
        // 对容器追加样式
        const containerElem = el;
        if (
            !["absolute", "relative", "fixed", "sticky"].includes(
                window.getComputedStyle(containerElem).position
            )
        ) {
            containerElem.style.position = "relative";
        }
        containerElem.style.backgroundColor = "#000";
        containerElem.style.mixBlendMode = "lighten";
        containerElem.style.overflow = "hidden";
        // 插入keyframe动画
        const lightframes = ` @keyframes light-shine{
            to{
                transform: translate(50%, 50%);
            }
        }`;
        const style = document.createElement("style");
        style.innerHTML = lightframes;
        document.getElementsByTagName("head")[0].appendChild(style);
        // 在容器末尾插入展示光效的元素
        const lightElem = document.createElement("span");
        lightElem.className = "light-layer";
        // 修改left参数可以影响在一次循环中光斑消失的比例，无停顿则改为-100%
        lightElem.style = `
            background: radial-gradient(circle at center, ${lightColor} ${lightShape[0]}, #00000000 ${lightShape[1]}) center / ${size[0]} ${size[1]};
            top: -100%;
            left: -180%;
            bottom: 0;
            right: 0;
            position: absolute;
            mix-blend-mode: overlay;
            animation: light-shine ${during} linear infinite;
            z-index: 99;
            pointer-events: none;
        `;
        if (background) {
            lightElem.style.background = background;
        }
        if (animation) {
            lightElem.style.animation = animation
        }
        containerElem.appendChild(lightElem);
    },
});